<template>
  <page-view class="menu-page">
    <page-header title="点餐"></page-header>
    <!-- 内容区域 -->
    <div
      class="content-box"
      ref="contentBoxDOM"
      @scroll="contentBoxDOMScroll($event)"
    >
      <div class="header-box">
        <van-swipe class="my-swipe" :autoplay="3000">
          <van-swipe-item
            v-for="(item, index) in bannerInfo"
            :key="index"
            @click="$router.push({ name: item.url })"
          >
            <van-image
              :src="item.banner_img"
              width="100%"
              height="200"
              fit="cover"
            />
          </van-swipe-item>
        </van-swipe>
        <!-- 查询 -->
        <div class="query-box" @click="$router.push({ name: 'searchFood' })">
          <input
            type="text"
            class="query-text"
            readonly
            placeholder="请输入菜品名称"
          />
          <button class="query-btn">搜索</button>
        </div>
      </div>

      <!-- 菜品列表展示 -->
      <div class="foods-list" v-if="foodList.length > 0">
        <van-config-provider :theme-vars="themeVars">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <food-item
                v-for="(item, index) in foodList"
                :key="index"
                :f_item="item"
              ></food-item>
            </van-list>
          </van-pull-refresh>
        </van-config-provider>
      </div>
    </div>
  </page-view>
</template>

<script setup>
import { inject, onActivated, reactive, ref } from "vue";
import api from "../utils/api";
import foodItem from "../components/FoodItem.vue";

// 自定义主题
const themeVars = reactive({
  listTextColor: "#ff0000",
  listTextFontSize: "20px",
  listTextLineHeight: "100px",
});

// 获取banner
let bannerInfo = reactive([]);
const BaseURL = inject("BaseURL");
const getBanner = async () => {
  let result = await api.bannerInfo.get();
  // console.log(result);
  if (result.length == 0) {
    bannerInfo.push({
      banner_img: require("../assets/image/01.jpg"),
      url: "menu",
    });
  } else {
    result.forEach((item) => {
      item.banner_img = BaseURL + item.banner_img;
      bannerInfo.push(item);
    });
  }
};
getBanner();

// 获取菜品
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const pageIndex = ref(1);
const foodList = reactive([]);
const totalPage = ref(0);
const getFood = async () => {
  let result = await api.foodInfo.findByPage({ pageIndex: pageIndex.value });
  // console.log(result);
  totalPage.value = result.totalPage;
  result.list.map((item) => {
    item.food_img = item.food_img.split(",");
    foodList.push(item);
  });
  loading.value = false;
  finished.value = pageIndex.value >= totalPage.value;
  refreshing.value = false;
};
getFood();

const onLoad = () => {
  if (pageIndex.value < totalPage.value) {
    pageIndex.value++;
    getFood();
  }
};

const onRefresh = () => {
  refreshing.value = true;
  finished.value = false;
  pageIndex.value = 1;
  foodList.length = 0;
  getFood();
};

// 记录滚动值，页面切换以后，保留当前位置
let contentBoxDOM = ref(null);
let contentBoxScrollTop = 0;
const contentBoxDOMScroll = (e) => {
  contentBoxScrollTop = e.currentTarget.scrollTop;
};
onActivated(() => {
  contentBoxDOM.value.scrollTop = contentBoxScrollTop;
});
</script>

<style lang="scss" scoped>
.menu-page {
  .content-box {
    flex: 1;
    overflow: auto;
    margin-bottom: 60px;
    .header-box {
      position: relative;
      .query-box {
        position: absolute;
        top: 15px;
        left: 40px;
        right: 40px;
        height: 30px;
        border-radius: 30px;
        overflow: hidden;
        display: flex;
        .query-text {
          flex: 1;
          border: none;
          padding: 0px 10px;
          background-color: rgba($color: #ffffff, $alpha: 0.5);
        }
        .query-btn {
          border: none;
          width: 45px;
          background-color: rgba($color: #ffffff, $alpha: 0.7);
        }
      }
    }
  }
}
</style>